<template>
    <baseView>
        <div class="orderList">
            <DataTableV2 class="rowClick" :params="params" :paginOption="paginOption" :fetchApi="orderList"
                :tableColumn="tableColumn" @rowClick="onRowClick" ref="tableRef">
                <!-- 查询 -->
                <template #search>
                    <div class="form-box">
                        <el-form :inline="true">
                            <el-form-item label="订单编号">
                                <el-input v-model="params.code" placeholder="请输入"></el-input>
                            </el-form-item>
                            <el-form-item label="申请单位">
                                <el-input v-model="params.shopname" placeholder="请输入"></el-input>
                            </el-form-item>
                            <el-form-item label="订单时间">
                                <el-date-picker value-format="YYYY-MM-DD" v-model="params.date" type="date"
                                    :clearable="false" />
                            </el-form-item>
                            <el-form-item label="垃圾类型">
                                <el-select v-model="params.type" placeholder="请选择" style="width: 120px;" clearable>
                                    <el-option v-for="item in rubbishOption" :key="item.value" :label="item.name"
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="订单状态">
                                <el-select v-model="params.status" placeholder="请选择" style="width: 120px;" clearable>
                                    <el-option v-for="item in statusOption" :key="item.value" :label="item.name"
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="searchTable">
                                    <el-icon style="margin-right: 2px;">
                                        <Search />
                                    </el-icon>查询
                                </el-button>
                                <el-button type="primary" plain @click="reset">重置</el-button>
                            </el-form-item>
                        </el-form>
                    </div>

                </template>
                <!-- 订单状态 -->
                <template #状态="{ row }">
                    <cleanTag :row="row" objectKey="状态"/>
                </template>
            </DataTableV2>
        </div>
        <Dialog v-model:dialogShow="dialogShow" title="详情" width="15%">
            <template #title>
                <div class="dialog-title">
                    <span>详情</span> <img @click="dialogShow=false" style="cursor: pointer;" :src="dialogClose" alt="">
                </div>
            </template>
            <div class="dialog-content">
                <div>
                    <div class="label">订单编号：</div>{{ rowData['编号'] }}
                </div>
                <div>
                    <div class="label"> 申请单位：</div>{{ rowData['店铺'] }}
                </div>
                <div>
                    <div class="label"> 联系人：</div>{{ rowData['联系人'] }}
                </div>

                <div>
                    <div class="label"> 垃圾类型：</div>{{ rowData['类型'] }}
                </div>
                <div>
                    <div class="label"> 垃圾数量：</div>{{ rowData['plannum'] }}桶 {{ rowData['planweight'] }}kg
                </div>
                <div>
                    <div class="label"> 申请时间：</div>{{ rowData['createtime'] }}
                </div>
                <div>
                    <div class="label">预约时间：</div>{{ rowData['plantime'] }}
                </div>
                <div>
                    <div class="label">订单状态：</div>{{ rowData['状态'] }}
                </div>
                <!-- <div>
                    订单接收时间：{{ rowData['realtime'] }}
                </div> -->
                <div>
                    <div class="label">收运时间：</div>{{ rowData['realtime'] }}
                </div>
                <div>
                    <div class="label"> 收运数量：</div> {{ rowData['realnum'] ? `${rowData['realnum']}桶 ${rowData['realweight']}kg` :'' }}
                </div>
                <div>
                    <div class="label"> 清运车辆：</div>{{ rowData['carno'] }}
                </div>
                <div>
                    <div class="label">作业人员：</div>{{ rowData['workername'] }}
                </div>
            </div>
            <div style="height: 20px;">

            </div>
            <!-- <el-row :gutter="12">
                <el-col :span="12">订单编号：{{ rowData['编号'] }}</el-col> <el-col :span="12">申请单位：{{ rowData['编号']
                    }}</el-col>
            </el-row>
            <el-row>
                <el-col :span="12">联系人：{{ rowData['编号'] }}</el-col> <el-col :span="12">垃圾类型：{{ rowData['编号'] }}</el-col>
            </el-row>
            <el-row>
                <el-col :span="12">垃圾数量：{{ rowData['编号'] }}</el-col> <el-col :span="12">预约时间：{{ rowData['编号']
                    }}</el-col>
            </el-row>
            <el-row>
                <el-col :span="12">订单时间：{{ rowData['编号'] }}</el-col> <el-col :span="12">订单状态：{{ rowData['编号']
                    }}</el-col>
            </el-row>
            <el-row>
                <el-col :span="12">订单接收时间：{{ rowData['编号'] }}</el-col> <el-col :span="12">订单完成时间：{{ rowData['编号']
                    }}</el-col>
            </el-row>
            <el-row>
                <el-col :span="12">订单完成数量：{{ rowData['编号'] }}</el-col> <el-col :span="12">清运车辆：{{ rowData['编号']
                    }}</el-col>
            </el-row>
            <el-row>
                <el-col :span="12">作业人员：{{ rowData['编号'] }}</el-col>
            </el-row> -->
        </Dialog>
    </baseView>

</template>

<script setup>
import { orderList } from "@/api/orderInfo"
import dialogClose from "@/assets/images/dialogClose.png"
import dayjs from "dayjs"
const typeObject = {
    '未接单': 'noClean',
    '已接单': 'cleaning',
    '已收运': 'cleaned'
}
// 表头
const tableColumn = ref([
    {
        label: '订单编号',
        prop: '编号',
    },
    {
        label: '申请单位',
        prop: '联系人',
    },
    {
        label: '垃圾类型',
        prop: '类型',
    },
    {
        label: '订单时间',
        prop: 'createtime',
        width: 200
    },
    {
        label: '订单状态',
        prop: '状态',
        slot: true
    },
])
const params = reactive({
    code: "",
    shopname: "",
    type: "",
    status: "",
    pagenum: 1,
    pagesize: 10,
    date: dayjs().format('YYYY-MM-DD')
})
const tableRef = ref(null)
function searchTable() {
    tableRef.value.fetchList()
}
const dialogShow = ref(false)

// 点击某一行
const rowData = ref({})
function onRowClick(row) {
    dialogShow.value = true;
    rowData.value = row
}

// 下拉选择的配置项
const rubbishOption = [
    {
        name: '干垃圾',
        value: 'dry'
    },
    {
        name: '湿垃圾',
        value: 'wet'
    },
    {
        name: '餐厨垃圾',
        value: 'food'
    }
]
const statusOption = [
    {
        name: '未接单',
        value: '0'
    },
    {
        name: '已接单',
        value: '1'
    },
    {
        name: '已收运',
        value: '2'
    }
]

function reset() {
    params.code = ""
    params.shopname = ""
    params.type = "",
        params.status = ""
    params.pagenum = 1
    params.pagesize = 10
    params.date = dayjs().format('YYYY-MM-DD')
    searchTable()
}

</script>

<style lang="scss" scoped>
.orderList {
    height: 100%;
    position: relative;
}

.form-box {
    display: flex;
    justify-content: flex-end;
}

.paginStyle {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);

}

.base-box {
    width: 54px;
    height: 28px;
    border-radius: 4px;
    margin: 0 auto;
}

.noClean {
    color: rgba(197, 207, 224, 1);
    background: rgba(197, 207, 224, 0.2);
}

.cleaning {
    color: rgba(255, 195, 0, 1);
    background: rgba(255, 195, 0, 0.2);
}

.cleaned {
    color: rgba(14, 204, 90, 1);
    background: rgba(208, 243, 222, 1);
}

.dialog-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    box-sizing: border-box;

    span {
        font-size: 16px;
        font-weight: bold;
        color: rgba(51, 51, 51, 1);
    }

    height: 44px;
    opacity: 1;
    background: linear-gradient(180deg, rgba(156, 224, 255, 0.95) 0%, rgba(255, 255, 255, 0.95) 100%),
    rgba(255, 255, 255, 1);
}

.dialog-content {
    margin-top: 10px;
    padding: 0 14px;
    box-sizing: border-box;

    &>div {
        display: flex;
        margin-bottom: 5px;

        .label {
            width: 100px;
            text-align: right;
        }
    }

}
</style>